<template>
  <ul class="todo-main">
    <!-- 遍历todos事件 -->
    <li v-for="(todo,index) in todos" :key="todo.id" @mouseenter="enterHandler(index)" :class="{active:currentIndex==index}">
      <label>
        <!--
           v-model:表单收集数据的，如果这里直接使用v-model,直接修改父组件的数据
           props:父组件给子组件传递数据(只读的),只可用，不能修改
           v-model:能读能改
           checked属性:如果是真 勾选上  如果是假的 不勾选

           表单元素的常用的事件:focus、blur、keydown、keyup、change等等
           单机事件可以与表单元素一起使用，但是很少这么书写的。
        -->
        <!-- ref:也可以在JS当中获取复选框勾选状态 -->
        <input type="checkbox"  :checked="todo.done" @change="handler(todo,$event)"/>
        <span>{{todo.title}}</span>
      </label>
      <!-- 
        以后开发项目的时候:元素显示、隐藏 三种手段
        v-if:频繁创建DOM、移出DOM，很消耗性能
        v-show：通过样式display：none|block
        动态行内样式:最终要的就是对象写法
       -->
      <button class="btn btn-danger"  v-show="todo.done" @click="clickHandler(todo.id)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  name: "",
  data() {
    return {
       //currentIndex:存储当前鼠标进入的事件【吃饭、睡觉、打豆豆的】索引值
       currentIndex:-1
    }
  },
  //第一种数组
  //第二种对象
  //第三种写法:下面这种写法,直接约束数据类型
  // props:{
  //    todos:Array
  // },
  props:['todos','updateDone','deleteTodo'],
  methods: {
     //复选框的事件的回调
     //第一个参数:能让你知道正在操作那个事情    第二个参数：能获取到复选框否选状态
     //todo是数组里面的元素,咱们需要对象里面的id
     handler({id},e){
        //调用父组件的方法，让父组件的方法修改自身的数据
        //第一个参数：告诉父组件，我正在修改那个事件
        //第二个参数：就是当前复选框的勾选的状态数值【true|false】
        this.updateDone(id,e.target.checked);
     },
     //鼠标进入的事件回调
     enterHandler(index){
       //当前组件实例存储鼠标进入这个元素的索引值
       //豪哥不对呀：你现在修改数据,currentIndex是当前组件自身的响应式数据，并非props！！！！当然可以修改！！！
       this.currentIndex = index;
     },

     //当前删除按钮的回调
     clickHandler(id){
       //子组件要调用父组件的方法，删除选中的那个事件【吃饭、睡觉、打豆豆】
       this.deleteTodo(id);
     }

  }
};
</script>

<style scoped>
   .active{
      background-image: linear-gradient(to right,black,pink,white,pink,black);
      color:yellowgreen;
      animation: donghua .1s linear 0s 1;
   }
   /* 定义动画 */
   @keyframes  donghua {
      form{
         transform: scale(1);
      }
      to{
        transform: scale(1.1);
      }
   }
</style>
